<template>
  <div class="push-data-container">
    <div ref="chartRef" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getPushRecord } from '@/api/push'
export default {
  name: 'PushData',
  data() {
    return {
      chart: null,
      chartData: {
        platforms: ['oppop', 'vivo', '荣耀', '华为', '小米','其他'],
        clickCounts: [0, 0, 0, 0, 0]
      }
    }
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    async initChart() {
      const res = await getPushRecord({
        appname: 'yqty'
      })

      this.chartData.platforms = res.data.map(item => item.name)
      this.chartData.clickCounts = res.data.map(item => item.value)
      

      this.chart = echarts.init(this.$refs.chartRef);
      this.updateChart();
    },
    updateChart() {
      const option = {
        title: {
          text: '有球体育推送点击次数',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.chartData.platforms,
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          name: '点击次数'
        },
        series: [{
          name: '点击次数',
          type: 'bar',
          data: this.chartData.clickCounts,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#13CE66' },
              { offset: 0.5, color: '#56DB72' },
              { offset: 1, color: '#57D75B' }
            ])
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
              ])
            }
          }
        }]
      };
      this.chart.setOption(option);
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
}
</script>

<style scoped>
.push-data-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.chart-container {
  width: 100%;
  height: 400px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>